<template>
	<div class="decorate-audio" :style="styleObj">
    <div >
      <div class="div-audio">
        <img :src="tplItemData.imgsrc?tplItemData.imgsrc:this.imgsrc" alt="头像" >
        <div class="arrow-right" :style="{borderLeftColor:tplItemData.bgColor}"></div>
        <div class="arrow-rights" @click="play()" :style="{backgroundColor:tplItemData.bgColor}">
          {{play_text}}
          <sub v-if="is_play===false"></sub>
          <b v-if="is_play===true"></b>
          <audio :src="tplItemData.audiosrc" ref="play" @ended="end()"></audio>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        styleObj: {},
        is_play: false,
        imgsrc: 'https://img.wifenxiao.com/h5-wfx/images/people.png',
        play_text: '缓冲完成后音频才可播放！',
        myaudio: ''
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    created() {
      // console.log(this.tplItemData, 'audio')
      this.navList = this.tplItemData.dataset
      this.styleObj.padding = this.tplItemData.modulePadding + 'px 0'
      // console.log(this.styleObj)
    },
    mounted() {
        // TODO 离开页面时暂停音频
      window.addEventListener('wxhide', () => {
        if (this.myaudio) {
          this.myaudio.pause()
          this.is_play = false
          this.play_text = '播放暂停，点击继续…'
        }
      })
      window.addEventListener('wxunload', () => {
        if (this.myaudio) {
          this.myaudio.pause()
          this.is_play = false
          this.play_text = '播放暂停，点击继续…'
        }
      })
    },
    methods: {
      play() {
        // 小程序音频
        if (this.is_play) {
          this.myaudio ? '' : this.myaudio = wx.createInnerAudioContext()
          this.myaudio.src = this.tplItemData.audiosrc
          this.myaudio.pause()

          this.is_play = false
          this.play_text = '播放暂停，点击继续…'
        } else {
          this.myaudio ? '' : this.myaudio = wx.createInnerAudioContext()
          this.myaudio.src = this.tplItemData.audiosrc
          this.myaudio.play()
          
          this.is_play = true
          this.play_text = '正在播放中…'
        }
        if (this.myaudio) {
          //小程序播放结束
          this.myaudio.onEnded(()=>{
            this.is_play = false
            this.play_text = '点击播放…'
          })
        }
      },
      //播放结束
      end() {
        // console.log('audio end')
        this.is_play = false
        this.play_text = '点击播放…'
      }
    }
  })
</script>

<style lang='scss'>
.decorate-audio{
    .div-audio{
      position: relative;
      z-index: 3;
      overflow: hidden;
      height: 80px;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      img{
        border-radius: 50%;
        // float: right;
        width: 80px;
        height: 80px;
      }
      .arrow-right{
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid;
      }
      .arrow-rights{
        position: relative;
        height: 80px;
        line-height: 80px;
        width:440px;
        padding-right: 80px;
        text-align: right;
        color: #fff;
        font-size: 28px;
        border-radius: 6px;
        sub{
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          width: 60px;
          height: 80px;
          background-repeat: no-repeat;
          background-size: 40px auto;
          background-position: 0 center;
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/audio_static.png);
        }
        b{
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          width: 60px;
          height: 80px;
          background-repeat: no-repeat;
          background-size: 40px auto;
          background-position: 0 center;
          background-image: url(https://img.wifenxiao.com/h5-wfx/images/audio.gif);
        }
      }
    }
}
</style>
